<template>
	<!-- 门店设置 -->
	<view class="store">
		<u-form :model="form" ref="uForm" label-width="160rpx">
			<view class="info u-flex">
				<u-image class="code-img" :src="merchantImage" mode="" width="125rpx" height="125rpx"></u-image>
				<view class="u-flex" style="flex-direction: column;    justify-content: space-between;height: 120rpx;">
					<view class="name u-line-1">
						{{merchantShortName}}
					</view>
					<view class="status u-flex u-col-center">
						<u-image style="margin-right: 10rpx;" src="@/static/offline/my/shop.png" mode="" width="30rpx"
							height="30rpx"></u-image>
						{{merchantStatus?'正常营业':'暂停营业'}}
					</view>
				</view>
			</view>
			<view class="pannel">
				<u-form-item label="商家简介" label-position="top" :border-bottom="false">
					<u-input v-model="form.merchantSynopsis" type="textarea" placeholder="说点什么吧..." />
				</u-form-item>
				<view class="">
					<view v-if="merchantApproveStatus==3" class="no-border-input">
						<u-form-item label="商家全称：" :border-bottom="false">
							<text>{{form.merchantName}}</text>
						</u-form-item>
					</view>
					<u-form-item v-else label="商家全称：" :border-bottom="false">
						<u-input v-model="form.merchantName" type="text" placeholder="请填写对应营业执照门店全称" />
					</u-form-item>
				</view>
				<u-form-item label="门店电话：" :border-bottom="false">
					<u-input v-model="form.merchantTel" type="number" placeholder="请填写门店联系电话" />
				</u-form-item>
				<u-form-item label="经营时间：" :border-bottom="false">
					<u-input v-model="form.businessStartTime" type="select"
						@click="show = true;pickerType = 'businessStartTime'" placeholder="请选择开始时间" />
					<text style="padding: 0 30rpx;">到</text>
					<u-input v-model="form.businessEndTime" type="select"
						@click="show = true;pickerType = 'businessEndTime'" placeholder="请选择结束时间" />
					<u-picker mode="time" v-model="show" :params="params" @confirm="selectTime"></u-picker>
				</u-form-item>
				<view class="no-border-input">
					<u-form-item label="门店地址：" :border-bottom="false">
						<view class="">
							<view style="line-height: 1.4;display: flex;align-items:center;">
								<text style="padding-right: 16rpx;">{{form.merchantAddress}}</text>
								<u-icon size="50" name="map" color="#1F6ECF" @click="chooseloacation"></u-icon>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="no-border-input">
					<u-form-item label="纬度：" :border-bottom="false">
						<text>{{lat}}</text>
					</u-form-item>
					<u-form-item label="经度：" :border-bottom="false">
						<text>{{lng}}</text>
					</u-form-item>
				</view>
				<view class="no-border-input">
					<u-form-item label="糖果抵扣现金比例：" label-width="280rpx" :border-bottom="false">
						<u-number-box v-model="form.ratioPercent" :min="0" :max="100" :step="1"></u-number-box>（%）
					</u-form-item>
					<u-form-item label="经营行业：" :border-bottom="false">
						<view class="">
							{{businessCategory}}
						</view>
					</u-form-item>
				</view>

				<view class="label-img">
					安全档案：
				</view>
				<view class="scroll-box">
					<view style="width: max-content;">
						<image class="shop-img s-img" v-for="(item,index) in cardImageList" :key="index" :src="item"
							mode="" @click="previewImg(item)"></image>
					</view>
				</view>
				<u-button v-if="merchantApproveStatus==2" style="margin-top: 40rpx" type="primary" shape="circle"
					@click="submit()">提交修改</u-button>
				<u-button v-if="merchantApproveStatus==3" style="margin-top: 40rpx" type="primary" shape="circle"
					@click="submit()">保存</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '',
				form: {
					merchantSynopsis: '',
					merchantName: '',
					merchantTel: '',
					ratioPercent: 0,
					businessStartTime: '',
					businessEndTime: '',
					merchantAddress: '',
					merchantRegionCode: ''

				},
				show: false,
				params: {
					hour: true,
					minute: true,
					second: true
				},
				merchantImage: '',
				businessCategory: '',
				cardImageList: [],
				pickerType: '',
				lat: '', //纬度
				lng: '', //经度
				merchantApproveStatus: 0,
				merchantShortName: '',
				merchantStatus: ''
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			previewImg(logourl) {},
			//选择定位
			chooseloacation() {
				var _this = this;
				uni.chooseLocation({
					success: (res) => {
						_this.form.merchantAddress = res.address;
						_this.lat = res.latitude;
						_this.lng = res.longitude;
						_this.getAdcode(res.latitude, res.longitude);
					}
				})
			},
			getAdcode(latitude, longitude) {
				var _this = this;
				var key = '914e53e8abb36cddf40df408b4e41912';
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?key=${key}&&location=${longitude},${latitude}`,
					success: (res) => {
						_this.form.merchantRegionCode = res.data.regeocode.addressComponent.adcode
					}
				})
			},
			getData() {
				this.$u.offlineApi.merchantInfo().then(res => {
					if (res.code == 0) {
						this.merchantImage = res.data.merchantImage;
						this.form.merchantSynopsis = res.data.merchantSynopsis;
						this.form.merchantName = res.data.merchantName;
						this.form.businessTimeDesc = res.data.businessTimeDesc;
						this.form.merchantTel = res.data.merchantTel;
						this.form.ratioPercent = res.data.sweetDeductRatio * 100;
						this.form.merchantAddress = res.data.merchantAddress;
						let times = res.data.businessTimeDesc != null ? res.data.businessTimeDesc.split('-') : [
							'08:00:00', '21:00:00'
						];
						this.form.businessStartTime = times[0];
						this.form.businessEndTime = times[1];

						this.businessCategory = res.data.businessCategory; // 行业
						this.form.merchantRegionCode = res.data.merchantRegionCode
						this.lat = res.data.merchantLatitude;
						this.lng = res.data.merchantLongitude;
						this.merchantApproveStatus = res.data.merchantApproveStatus;
						this.merchantShortName = res.data.merchantShortName;
						this.merchantStatus = this.compareSetHours(times);
						this.cardImageList.push(res.data.businessLicenseImage);
						this.cardImageList.push(res.data.idCardPersonalImage);
						this.cardImageList.push(res.data.idCardNationalImage);
					}
				})
			},
			selectTime(val) {
				let times = `${val.hour}:${val.minute}:${val.second}`;
				this.form[this.pickerType] = times;

			},
			toMap() {
				uni.navigateTo({
					url: '/pages/offline/my/storeSettingsMap'
				})
			},
			submit() {
				this.$u.offlineApi.supplementInfo({
					"merchantAddress": this.form.merchantAddress,
					"merchantLatitude": this.lat,
					"merchantLongitude": this.lng,
					"merchantRegionCode": this.form.merchantRegionCode, //商家位置编码
					"merchantName": this.form.merchantName,
					"merchantSynopsis": this.form.merchantSynopsis,
					"ratioPercent": this.form.ratioPercent,
					"businessStartTime": this.form.businessStartTime,
					"businessEndTime": this.form.businessEndTime,
					"merchantTel": this.form.merchantTel
				}).then(res => {
					if (res.code == 0) {
						this.$u.toast('保存成功')
						this.getData();
						this.cardImageList = []
					} else {
						this.$u.toast(res.msg)
						/* uni.showToast({
							title: '添加失败！' + res.msg
						}) */
					}
				})
			},
			//判断时间范围
			compareSetHours(time) {
				var result = false
				if (time.length === 2) {
					var date = new Date();
					var YY = date.getFullYear();
					var MM = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
					var DD = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
					var time1 = YY + '-' + MM + '-' + DD + ' ' + time[0];
					var time2 = YY + '-' + MM + '-' + DD + ' ' + time[1];
					var start = new Date(time1).getTime();
					var middle = new Date().getTime();
					var end = new Date(time2).getTime();
					result = start < middle && middle < end;
				}
				return result
			},
		}
	}
</script>

<style scoped lang="scss">
	.store {
		padding-bottom: 40rpx;
	}

	.info {
		padding: 48rpx 30rpx 0 30rpx;
	}

	.code-img {
		margin-right: 16rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.pannel {
		padding: 0 30rpx;
	}

	.scroll-box {
		width: 100%;
		height: 148rpx;
		overflow-x: scroll;

		.s-img {
			margin-right: 20rpx;
			display: block;
			float: left;
		}
	}

	.label-img {
		line-height: 80rpx;
	}

	.shop-img {
		margin-right: 10rpx;
		width: 206rpx;
		height: 148rpx;
	}

	.status {
		color: #1F6ECF;
	}

	// /deep/.u-input__input {
	// 	padding-left: 10rpx;
	// }
	// /deep/.u-input {
	// 	border: 1rpx solid #DDDADA;
	// }
	/deep/.u-form-item--right__content {
		padding: 0 10rpx;
		border: 1rpx solid #DDDADA;
		border-radius: 5rpx;
	}

	.no-border-input {
		/deep/.u-form-item--right__content {
			border: 0 solid #DDDADA;

		}
	}
</style>
